<template>
  <div class="login-container">
    <!-- 上层：标题区域 -->
    <header class="login-header">
      <h1><span style="font-family: STXingkai ">欢迎登录仓库管理系统</span></h1>
    </header>

    <!-- 中层：登录表单 -->
    <main class="login-main">
      <div class="login-form">
        <div class="form-group">
          <el-input
              v-model="username"
              placeholder=" 请输入账号"
              size="large"
              :prefix-icon="User"

          />
        </div>
        <div class="form-group">
          <el-input
              v-model="password"
              type="password"
              placeholder=" 请输入密码"
              size="large"
              :prefix-icon="Lock"
              show-password
          />
        </div>
        <div class="form-group">
          <el-button
              type="success"
              size="large"
              class="login-btn"
              @click="handleLogin"
          >
            登录
          </el-button>
        </div>
      </div>
    </main>
    <!-- 下层：当前时间 -->
    <footer class="login-footer">
      <p>{{nowTime}}</p>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import axios from "axios";
import {useRouter} from "vue-router";
const router = useRouter()
const username = ref('')
const password = ref('')
let currentUser = ref(null)
let nowTime = Date.now()

const handleLogin = () => {
  if (!username.value || !password.value) {
    alert('账号或密码不能为空')
    return
  }
  console.log('登录信息:', {
    username: username.value,
    password: password.value
  })



  axios.post('http://localhost:8080/user/login',
      {
        username: username.value,
        password: password.value
      }).then((res) => {
    if (res.data.code === 0) {
      currentUser.value =res.data.data
      currentUser.value.password=''
      localStorage.setItem('currentUser', JSON.stringify(currentUser.value))
      //  跳转到主页
      console.log(currentUser.value)
      router.push({ name: 'userInformation' })
    } else if (res.data.code === 1) {
      alert("登录失败")
    }
  })
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8fafc;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.login-header {
  background-color: #ffffff;
  padding: 20px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.login-header h1 {
  color: #38b2ac;
  font-weight: 400;
  font-size: 1.8rem;
  margin: 0;
}

.login-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
  padding: 20px;
}

.login-form {
  width: 100%;
  max-width: 400px;
  padding: 40px 30px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(66, 153, 139, 0.15);
  text-align: center;
}

.form-group {
  margin-bottom: 25px;
}



.custom-input :deep(.el-input__inner) {
  background-color: #f0fdfa;
  border: 1px solid #a8f0e6;
  color: #0d9488;
  height: 48px;
  font-size: 16px;
}

.custom-input :deep(.el-input__inner:focus) {
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}

.custom-input :deep(.el-input__prefix) {
  color: #0d9488;
  margin-left: 10px;
}

.login-btn {
  width: 100%;
  height: 48px;
  font-size: 18px;
  letter-spacing: 2px;
  background: linear-gradient(to right, #10b981, #0d9488);
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

.login-footer {
  background-color: #ffffff;
  padding: 15px 0;
  text-align: center;
  color: #718096;
  font-size: 0.9rem;
  border-top: 1px solid #e2e8f0;
}
</style>